<template>
  <div style="background-color: #f4f6f8;" >
  <div style="display: flex;margin: 0 5%">
<!--    左边-->
    <div style="flex: 3;margin-bottom: 50px">
      <div style="display: flex; flex-direction: column;align-items: center">
        <div class="card-content1" style="
      ">
          <img :src="user.avatar" width="150px" height="150px"
               style="height: 150px;width: 150px;background-color: yellowgreen;border-radius: 50%;
        margin-top: 20px;
        ">
          <div style="margin-top: 20px;font-size: 20px;font-weight: bold">{{user.name}}</div>
          <div style="margin: 20px;font-weight: bold">{{user.introduction}}</div>
        </div>
        <div>
          <el-card style="width: 380px;margin-top: 10px;background-color: rgb(230 213 227);text-align: center">
            <span>写一篇自己的文章吧</span>
            <el-button style="margin-left: 20px" type="primary" @click="$router.push('/addArticle')">新增</el-button>
          </el-card>
        </div>
        <div>
          <el-card style="width: 380px;margin-top: 10px;background-color: rgb(230 213 227);text-align: center">
            <span>快看看我的收藏吧</span>
            <el-button style="margin-left: 20px" type="primary" @click="collect">收藏</el-button>
          </el-card>
        </div>
      </div>
    </div>
<!--  右边  -->
    <div style="flex: 7 " >
      <div style="display: flex;margin-left: 10px; flex-wrap: wrap;align-items: center;justify-content: center">
        <div v-for="(item,index) in myArticle "  :key="item.id"  >
          <div style="width: 400px;height: 300px;border-radius: 12px;
        background-color: white;margin-top: 50px;margin-left: 15px;position: relative">
            <div class="card-image">
              <el-image class="my-el-image"
                        v-once
                        lazy
                        :src=" item.articleCover || 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'"
                        fit="cover">
                <div slot="error" class="image-slot myCenter" style="background-color:lightgreen">
                  <div class="error-text">
                    <div>遇事不决，可问春风</div>
                  </div>
                </div>
              </el-image>
            </div>
            <div class="card-body">
              <div class="card-title" @click="$router.push('/detail?id='+item.id)">
                {{item.articleTitle}}
              </div>
              <div class="card-desc">
                {{item.articleContent}}
              </div>

              <div class="card-time">
                <svg viewBox="0 0 1024 1024" width="14" height="14" style="vertical-align: -2px;">
                  <path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#409EFF"></path>
                  <path
                      d="M654.222222 256c-17.066667 0-28.444444 11.377778-28.444444 28.444444v56.888889c0 17.066667 11.377778 28.444444 28.444444 28.444445s28.444444-11.377778 28.444445-28.444445v-56.888889c0-17.066667-11.377778-28.444444-28.444445-28.444444zM369.777778 256c-17.066667 0-28.444444 11.377778-28.444445 28.444444v56.888889c0 17.066667 11.377778 28.444444 28.444445 28.444445s28.444444-11.377778 28.444444-28.444445v-56.888889c0-17.066667-11.377778-28.444444-28.444444-28.444444z"
                      fill="#FFFFFF"></path>
                  <path
                      d="M725.333333 312.888889H711.111111v28.444444c0 31.288889-25.6 56.888889-56.888889 56.888889s-56.888889-25.6-56.888889-56.888889v-28.444444h-170.666666v28.444444c0 31.288889-25.6 56.888889-56.888889 56.888889s-56.888889-25.6-56.888889-56.888889v-28.444444h-14.222222c-22.755556 0-42.666667 19.911111-42.666667 42.666667v341.333333c0 22.755556 19.911111 42.666667 42.666667 42.666667h426.666666c22.755556 0 42.666667-19.911111 42.666667-42.666667v-341.333333c0-22.755556-19.911111-42.666667-42.666667-42.666667zM426.666667 654.222222h-56.888889c-17.066667 0-28.444444-11.377778-28.444445-28.444444s11.377778-28.444444 28.444445-28.444445h56.888889c17.066667 0 28.444444 11.377778 28.444444 28.444445s-11.377778 28.444444-28.444444 28.444444z m227.555555 0h-56.888889c-17.066667 0-28.444444-11.377778-28.444444-28.444444s11.377778-28.444444 28.444444-28.444445h56.888889c17.066667 0 28.444444 11.377778 28.444445 28.444445s-11.377778 28.444444-28.444445 28.444444z m0-113.777778h-56.888889c-17.066667 0-28.444444-11.377778-28.444444-28.444444s11.377778-28.444444 28.444444-28.444444h56.888889c17.066667 0 28.444444 11.377778 28.444445 28.444444s-11.377778 28.444444-28.444445 28.444444z"
                      fill="#FFFFFF"></path>
                </svg>
                {{item.createTime}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

    <!--  尾部  -->
    <div style="margin-top: 50px;position: relative;z-index: 10">
      <my-footer/>
    </div>


</div>
</template>


<script>


import MyFooter from "@/components/myFooter.vue";

export default {
  name: "MyArticle",
  components: {MyFooter},
  data(){
    return{
      myArticle:[],
      collectArticle:[],
      user:JSON.parse(localStorage.getItem("news") || '{}'),
    }
  },
  created() {
    this.selectArticleByCurrentUserId()
  },
  methods:{
    //根据当前登录账号查询本人发表文章
    selectArticleByCurrentUserId(){
      this.$request.get('/boke/article/myArticle').then(res =>{
        this.myArticle=res.data || []
      })
    },
    collect(){
      this.$request.get('/boke/article/myCollections').then(res =>{
        this.myArticle = res.data || []
      })
    }
  }
}
</script>


<style scoped>

.card-content1{
  width: 380px;
  border-radius: 12px;
  background: linear-gradient(-45deg, #e8d8b9, #eccec5, #a3e9eb, #bdbdf0, #eec1ea);
  background-size: 400% 400%;
  animation: gradientBG 10s ease infinite;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;

}
/* 背景位置移动 */
@keyframes gradientBG {
  0% {
    background-position: 0 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}



.my-el-image{
  width: 100%;
  height: 100%;
}

.my-el-image .image-slot {
  width: 100%;
  height: 100%;
}
/* 居中 */
.myCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
.error-text {
  font-size: 20px;
  line-height: 1.8;
  letter-spacing: 8px;
  color: white;
}

.card-image {
  width: 100%;
  height: 180px;
}

.card-image >>> .el-image__inner {
  transition: all 1s;
}

.card-image >>> .el-image__inner:hover {
  transform: scale(1.2);
}

.card-body {
  padding: 10px 20px;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  transition: all .2s ease-in-out;
  cursor: pointer;
}

.card-title:hover {
  color: lightGreen;
}

.card-desc {
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  letter-spacing: 1px;
}

.card-time {
  position: absolute;
  bottom: 10px;
  font-size: 12px;
  color: grey;
}

@media screen and (max-width: 700px) {
  .card-item {
    width: calc(100% / 2 - 20px);
  }
}

@media screen and (max-width: 500px) {
  .card-item {
    width: calc(100% - 20px);
  }
}
</style>